<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="form">
			<view class="header">
				<view class="title">主体信息</view>
			</view>
			<view class="item">
				<view class="label">主体性质</view>
				<view class="value">
					<uni-data-select @change="onChangeNature" v-model="form.type" :localdata="nature"></uni-data-select>
				</view>
			</view>
			<view class="item">
				<view class="label">主办单位名称</view>
				<view class="value"><u--input placeholder="请输入主办单位名称" border="surround" v-model="form.name"></u--input>
				</view>
			</view>
			<view class="item">
				<view class="label">备案地区</view>
				<view class="value">
					<picker @change="onChangeDistrict" mode="region">
						<u--input disabled placeholder="请选择选择省市区" border="surround" v-model="form.area">
						</u--input>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="label">通讯地址</view>
				<view class="value"><u--input placeholder="请输入主办单位通讯地址" border="surround"
						v-model="form.address"></u--input>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="header">
				<view class="title">附属信息</view>
			</view>
			<view class="item">
				<view class="label">证件类型</view>
				<view class="value">
					<uni-data-select @change="onChangeCertificate" v-model="form.certificate_type"
						:localdata="org_certificate"></uni-data-select>
					</u--input>
				</view>
			</view>
			<view class="item">
				<view class="label">证件照片</view>
				<view class="value">
					<u-upload :fileList="photo" @afterRead="afterRead" @delete="deletePic" name="photo"
						:multiple="false" :maxCount="1"></u-upload>
				</view>
			</view>
			<view class="item">
				<view class="label">证件号码</view>
				<view class="value"><u--input placeholder="请输入证件号码" border="surround"
						v-model="form.certificate_number"></u--input>
				</view>
			</view>
			<view class="item">
				<view class="label">证件地址</view>
				<view class="value"><u--input placeholder="请输入证件地址" border="surround"
						v-model="form.certificate_address"></u--input>
				</view>
			</view>
			<view class="item">
				<view class="label">主体备注</view>
				<view class="value">
					<u--textarea maxlength="-1" placeholder="请输入主体备注" v-model="form.comment"></u--textarea>
					</u--input>
				</view>
			</view>
		</view>

		<view class="form">
			<view class="header">
				<view class="title">其他备案媒体材料</view>
			</view>
			<view class="item">
				<view class="label">上传类型</view>
				<view class='value'>
					<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :name="item.value">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>

			<view class="item" v-if='checkboxValue1.includes("commitment_letter")'>
				<view class="label">互联网信息服务承诺书</view>
				<view class="value">
					<u-upload :fileList="materials_temp.commitment_letter" @afterRead="afterReadMaterials" @delete="deleteMaterials"
						name="commitment_letter" :multiple="false" :maxCount="1"></u-upload>
					<view style='font-size:13px;color:red;' @click="downloadTemplate">模板下载</view>
				</view>
			</view>

			<view class="item" v-if='checkboxValue1.includes("business_name_change_letter")'>
				<view class="label">主体更名函</view>
				<view class="value">
					<u-upload :fileList="materials_temp.business_name_change_letter" @afterRead="afterReadMaterials"
						@delete="deleteMaterials" name="business_name_change_letter" :multiple="false"
						:maxCount="1"></u-upload>
				</view>
			</view>

			<view class="item" v-if='checkboxValue1.includes("party_building_confirmation_letter")'>
				<view class="label">党建确认函</view>
				<view class="value">
					<u-upload :fileList="materials_temp.party_building_confirmation_letter" @afterRead="afterReadMaterials"
						@delete="deleteMaterials" name="party_building_confirmation_letter" :multiple="false"
						:maxCount="1"></u-upload>
				</view>
			</view>

			<view class="item" v-if='checkboxValue1.includes("promise_video")'>
				<view class="label">承诺视频</view>
				<view class="value">
					<u-upload :fileList="materials_temp.promise_video" @afterRead="afterReadMaterials" @delete="deleteMaterials"
						name="promise_video" :multiple="false" :maxCount="1"></u-upload>
				</view>
			</view>

			<view class="item" v-if='checkboxValue1.includes("authenticity_responsibility_letter")'>
				<view class="label">网站备案信息真实性责任告知书</view>
				<view class="value">
					<u-upload :fileList="materials_temp.authenticity_responsibility_letter" @afterRead="afterReadMaterials"
						@delete="deleteMaterials" name="authenticity_responsibility_letter" :multiple="false"
						:maxCount="1"></u-upload>
				</view>
			</view>


			<view class="item" v-if='checkboxValue1.includes("authenticity_commitment_letter")'>
				<view class="label">小程序备案信息真实性承诺书</view>
				<view class="value">
					<u-upload :fileList="materials_temp.authenticity_commitment_letter" @afterRead="afterReadMaterials"
						@delete="deleteMaterials" name="authenticity_commitment_letter" :multiple="false"
						:maxCount="1"></u-upload>
				</view>
			</view>

			<view class="item" v-if='checkboxValue1.includes("website_construction_proposal")'>
				<view class="label">小程序建设方案书</view>
				<view class="value">
					<u-upload :fileList="materials_temp.website_construction_proposal" @afterRead="afterReadMaterials"
						@delete="deleteMaterials" name="website_construction_proposal" :multiple="false"
						:maxCount="1"></u-upload>
				</view>
			</view>

			<view class="item" v-if='checkboxValue1.includes("subject_other_materials")'>
				<view class="label">主体其它附件</view>
				<view class="value">
					<u-upload :fileList="materials_temp.subject_other_materials" @afterRead="afterReadMaterials"
						@delete="deleteMaterials" name="subject_other_materials" :multiple="false" :maxCount="10"></u-upload>
				</view>
			</view>

			<view class="item" v-if='checkboxValue1.includes("applets_other_materials")'>
				<view class="label">小程序其它附件</view>
				<view class="value">
					<u-upload :fileList="materials_temp.applets_other_materials" @afterRead="afterReadMaterials"
						@delete="deleteMaterials" name="applets_other_materials" :multiple="false" :maxCount="10"></u-upload>
				</view>
			</view>

			<view class="item" v-if='checkboxValue1.includes("holding_certificate_photo")'>
				<view class="label">手持证件照</view>
				<view class="value">
					<u-upload :fileList="materials_temp.holding_certificate_photo" @afterRead="afterReadMaterials"
						@delete="deleteMaterials" name="holding_certificate_photo" :multiple="false" :maxCount="1"></u-upload>
				</view>
			</view>
		</view>

		<view class="submit">
			<view class="btn left" @click="onUpdateCompany">
				<u-button shape="circle" type="primary" text="更新主体信息"
					color="linear-gradient(to right, #2979ff, #2b85e4)"></u-button>
			</view>
			<view class="btn right" @click="onUpdateCharge">
				<u-button shape="circle" type="error" text="负责人管理"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		company,
		subjectTypes,
		update
	} from "@/api/subject.js";
	import {
		upload
	} from "@/api/system.js";
	import {siteroot} from '@/siteinfo.js'
	export default {
		data() {
			return {
				//媒体ID
				materials_media: {
					subject_other_materials:[],
					applets_other_materials:[]
				},
				//本地路径 回显使用
				materials_url:{
					subject_other_materials:[],
					applets_other_materials:[]
				},
				//临时地址
				materials_temp:{
					subject_other_materials:[],
					applets_other_materials:[]
				},
				checkboxValue1: [],
				checkboxList1: [{
						name: '互联网信息服务承诺书',
						value: 'commitment_letter',
					},
					{
						name: '主体更名函',
						value: 'business_name_change_letter',
					},
					{
						name: '党建确认函',
						value: 'party_building_confirmation_letter',
					},
					{
						name: '承诺视频',
						value: 'promise_video',
					},
					{
						name: '网站备案信息真实性责任告知书',
						value: 'authenticity_responsibility_letter',
					},
					{
						name: '小程序备案信息真实性承诺书',
						value: 'authenticity_commitment_letter',
					},
					{
						name: '小程序建设方案书',
						value: 'website_construction_proposal',
					},
					{
						name: '主体其它附件',
						value: 'subject_other_materials',
					},
					{
						name: '小程序其它附件',
						value: 'applets_other_materials',
					},
					{
						name: '手持证件照',
						value: 'holding_certificate_photo',
					},
				],
				// 证件照片
				photo: [],
				// 主体ID
				id: 0,
				// 小程序Id
				applet_id: 0,
				// 主体单位性质
				nature: {},
				// 主体类型
				nature_value: '',
				// 证件类型
				certificate_value: '',
				// 主体表单
				form: {
					// 主体性质
					type: '',
					// 主办单位名称
					name: '',
					// 省份代码
					province: '',
					province_name: '',
					// 城市代码
					city: '',
					city_name: '',
					// 区域代码
					district: '',
					district_name: '',
					// 详细地址
					address: '',
					// 显示的拼接地区
					area: '',
					// 主体证件类型
					certificate_type: '',
					// 主体证件号码
					certificate_number: '',
					// 主体证件住所
					certificate_address: '',
					// 主体证件照片 media_id
					certificate_photo: '',
					// 备注
					comment: "",
					// 主体负责人数据ID
					principal_id: '',
					id: ''
				},
				org_certificate: []
			};
		},
		onLoad(options) {
			let _this = this
			if (!options.id) {
				uni.navigateBack()
				return false;
			}
			_this.id = options.id
			_this.applet_id = options.applet_id
			// 证件类型
			_this.onGetCertificateTypes()
			// 获取主体详情
			_this.onGetCompany()
			// 获取主体单位性质
			_this.onSubjectNature()
		},
		methods: {
			//下载模板
			downloadTemplate() {
				uni.downloadFile({
					url: siteroot+"/app/ycMini/image/template.doc",
					success: res => {
						if (res.statusCode === 200) {
							// 预览pdf文件
							uni.openDocument({
								filePath: res.tempFilePath,
								showMenu: true, // 右上角菜单，可以进行分享保存pdf
								fileType:'doc',
								success: function(file) {
									console.log("file-success", file)
								}
							})
						}
					}
				})
			},
			//移除图片
			deletePic() {
				let _this = this
				_this.photo = []
			},
			//跳转负责人
			onUpdateCharge() {
				let _this = this
				uni.navigateTo({
					url: '/pages/subject/charge/index?id=' + _this.form.principal_id + '&nature_value=' + _this
						.nature_value + '&applet_id=' + _this
						.applet_id
				})
			},
			//更新主体
			onUpdateCompany() {
				let _this = this
				update({..._this.form,materials_media:_this.materials_media,materials_url:_this.materials_url}).then(res => {
					console.log(res.code)
					if (res.code == 200) {
						_this.$refs.uToast.show({
							type: 'success',
							message: res.msg,
							complete() {
								_this.onGetCompany()
							}
						})
					}
				}).catch(err => {

				})
			},
			//上传文件
			async afterRead(event) {
				let _this = this
				_this.photo = []
				let result = await upload({
					file: event.file.url,
					type: 'image',
					certificate_type: _this.certificate_value,
					id: _this.applet_id,
					icp_order_field: 'icp_subject.organize_info.certificate_photo'
				}).then(result => {
					return result;
				}).catch(err => {

				})
				_this.form.certificate_photo = result.media
				_this.form.certificate_number = result.info.certificate_number
				_this.form.certificate_address = result.info.address
				_this.form.certificate_photo_url = result.image
				_this.photo = [{
					url: event.file.url
				}]
			},
			//上传其他媒体材料
			afterReadMaterials(event){
				let _this=this
				let name=event.name
				upload({
					file:event.file.url,
					type:"image",
					id: _this.applet_id,
					icp_order_field:'icp_materials.'+event.name
				}).then(res=>{
                    let arr1 = {
                    	url: event.file.url
                    }
					if(event.name=='subject_other_materials'){
						_this.materials_media.subject_other_materials.push(res.media)
						_this.materials_temp.subject_other_materials.push(arr1)
						_this.materials_url.subject_other_materials.push(res.image)
						return;
					}
					if(event.name=='applets_other_materials'){
						_this.materials_media.applets_other_materials.push(res.media)
						_this.materials_temp.applets_other_materials.push(arr1)
						_this.materials_url.applets_other_materials.push(res.image)
						return;
					}
					let arr = [{
						url: event.file.url
					}]
					_this.materials_media = {
						..._this.materials_media,
						[name]: res.media,
					}
					
					_this.materials_url = {
						..._this.materials_url,
						[name]: res.image
					}
					
					_this.materials_temp = {
						..._this.materials_temp,
						[name]: arr
					}
				})
			},
			//删除
			deleteMaterials(event){
				let _this=this
				let name=event.name
				let index = event.index
				if(event.name=='subject_other_materials'){
					_this.materials_url.subject_other_materials.splice(index, 1)
					_this.materials_temp.subject_other_materials.splice(index, 1)
					_this.materials_media.subject_other_materials.splice(index, 1)
					return;
				}
				if(event.name=='applets_other_materials'){
					_this.materials_url.applets_other_materials.splice(index, 1)
					_this.materials_temp.applets_other_materials.splice(index, 1)
					_this.materials_media.applets_other_materials.splice(index, 1)
					return;
				}
				_this.form = {
					..._this.form,
					[name]: ""
				}
				_this.urlForm = {
					..._this.urlForm,
					[name]: ""
				}
				_this.image = {
					..._this.image,
					[name]: []
				}
			},
			onChangeCertificate(value) {
				let _this = this
				_this.certificate_value = value
				_this.form.certificate_type = value
			},
			onChangeNature(value) {
				let _this = this
				_this.nature_value = value
				_this.type = value
				_this.onGetCertificateTypes()
			},
			onGetCertificateTypes() {
				let _this = this
				subjectTypes({
					id: _this.applet_id,
					type: 'certificateTypes'
				}).then(res => {
					let data = res.data
					let map = []
					if (!_this.nature_value) {
						for (let i in data) {
							let obj = {}
							obj.text = data[i].name
							obj.value = data[i].type
							map[i] = obj
						}
						_this.org_certificate = map
						return false;
					}
					let arr = []
					let index = 0
					for (let i in data) {
						if (_this.nature_value == data[i].subject_type) {
							arr[index] = data[i]
							index++;
						}
					}
					for (let i in arr) {
						let obj = {}
						obj.text = arr[i].name
						obj.value = arr[i].type
						map[i] = obj
					}
					_this.org_certificate = map
				}).catch(err => {

				})
			},
			onChangeDistrict(event) {
				let _this = this
				let form = _this.form
				form.area = event.detail.value[0] + " - " + event.detail.value[1] + " - " + event.detail.value[2]
				form.province_name = event.detail.value[0]
				form.city_name = event.detail.value[1]
				form.district_name = event.detail.value[2]
				form.city = event.detail.code[0]
				form.province = event.detail.code[1]
				form.district = event.detail.code[2]
				_this.form = form
				console.log(_this.form)
				console.log(form)

			},
			onSubjectNature() {
				let _this = this
				subjectTypes({
					id: _this.applet_id,
					type: 'subjectTypes'
				}).then(res => {
					let nature = res.data
					let arr = []
					for (let i in nature) {
						let obj = {}
						obj.text = nature[i].name
						obj.value = nature[i].type
						arr[i] = obj
					}
					_this.nature = arr
				}).catch(err => {

				})
			},
			onDistrictCode() {
				let _this = this
				subjectTypes({
					id: _this.applet_id,
					type: 'districtCode'
				}).then(res => {
					_this.district = res.data
				}).catch(err => {

				})
			},
			onGetCompany() {
				let _this = this
				_this.photo = []
				company({
					id: _this.id
				}).then(res => {
					let form = res.data
					if (form.province_name) {
						form.area = form.province_name + " - " + form.city_name + " - " + form.district_name
					}
					_this.nature_value = form.type
					_this.certificate_value = form.certificate_type
					if (form.certificate_photo_url) {
						_this.photo = [{
							url: form.certificate_photo_url
						}]
					}
					
					_this.form = form
					_this.materials_media=_this.form.materials_media
					_this.materials_url=_this.form.materials_url
					_this.materials_temp=_this.form.materials_temp
					_this.checkboxValue1=_this.form.checked
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 180rpx;
	}

	.u-upload__deletable {
		z-index: 1 !important;
	}

	.submit {
		width: 100%;
		position: fixed;
		bottom: 30rpx;
		z-index: 9999;
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		.btn.left {
			width: 50%;
		}

		.btn.right {
			width: 30%;
		}

		.btn {
			width: 90%;
			margin: 30rpx auto;

			.u-button {
				height: 100rpx;
			}
		}
	}

	.form {
		width: 86%;
		margin: 30rpx auto;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;

		.header {
			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 0rpx;

			.label {
				width: 30%;
			}

			.value {
				width: 70%;
			}
		}
	}
</style>